<template>
    <div class="order">
        <div class="base_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">我的订单
        </div>
        <ul class="horizontal-list clear order_menu">
            <li @click="checkMenu('')"  :class="{active:order.type == ''}"  >全部</li>
            <li @click="checkMenu('0')" :class="{active:order.type == '0'}" >待付款</li>
            <li @click="checkMenu('1')" :class="{active:order.type == '1'}" >待发货</li>
            <li @click="checkMenu('2')" :class="{active:order.type == '2'}" >待收货</li>
            <li @click="checkMenu('4,5,7')" :class="{active:order.type == '4,5,7'}" >售后</li>
        </ul>
        
        <ul class="vertical-list order_list" >
        	<div class="tip" v-if="orderArray==[]||orderArray==null">
        			<img src="../../assets/img/order/empty.png"/>
        	</div>
            <li v-for="order in orderArray" v-else>
            	
                <div class="order_title">
                    <img src="../../assets/img/order/shop_icon.png" alt="">
                    <router-link :to="{path:'/shop',query:{shopId:order.shopId}}">{{order.shopName}} ></router-link>
                    <span class="order_status" v-if="order.status == '0'">等待买家付款</span>
                    <span class="order_status" v-else-if="order.status == '1'">买家已支付</span>
                    <span class="order_status" v-else-if="order.status == '2'">卖家已发货</span>
                    <span class="order_status" v-else-if="order.status == '3'">买家已确认收货</span>
                    <span class="order_status" v-else-if="order.status == '4'">退款中</span>
                    <span class="order_status" v-else-if="order.status == '5'">已退款</span>
                    <span class="order_status" v-else-if="order.status == '7'">退款已拒绝</span>
                    <span class="order_status" v-else>已取消</span>
                </div>
                <div>
                    <div class="order_info" v-for="product in order.products">
                        <router-link :to="{path:'/detail',query:{productId:product.productId}}">
                            <img :src="imageDomain + product.image" alt="">
                            <div>
                              <p>{{product.name}}</p>
                              <p class="f12 mt5">{{product.spec}}</p>
                              <p>￥{{product.price}} <span class="fr">X{{product.quantity}}</span></p>
                            </div>
                        </router-link>
                    </div>
                    <div class="order_bar">
                        共{{order.totalQuantity}}件商品 实付款：￥{{order.payAmount}}
                    </div>
                    <div class="order_bts">
                        <router-link :to="{path:'/order_detail',query:{deliveryOrderCode:order.deliveryOrderCode}}"><span class="bts light gray">查看订单</span></router-link>
                        <span class="bts light gray" v-show="order.status == '0' || order.status == '6'" @click="deleteOrder(order.deliveryOrderCode)">删除订单</span>
                        <span class="bts" v-show="order.status == '0'" @click="goPay(order)">去支付</span>
                        <span class="bts" v-show="order.status == '3'&&getOrder(order.deliveryOrderCode)" @click="goAssement(order.deliveryOrderCode)">评价</span>    
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<style>
    @import url("./order.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'
    import { MessageBox } from 'mint-ui';

    export default {
        data() {
            return {
                orderArray: [],
                imageDomain: API.imageDomain,
                order: {
                    type: this.$route.query.orderType
                },
                payOrderResult:{},
                person:{},
                assementList:[]
            }
        },
        created() {
             window.scrollTo(0,0);
            let url = API.serviceDomain + API.orderList + "?status="+this.order.type;
            this.$http.get(url).then(
                (res) => {
                    if (res.body.status == '000000') {
                        this.orderArray = res.body.data;
                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
          
        }
        ,
        mounted() {  
            this.getPersonInfo()
        }
        ,
        methods: {
            getPersonInfo(){
                  let personurl = API.serviceDomain + API.personDetail;
                  this.$http.get(personurl).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            this.person = res.body.data.userInfo;
                            this.getUserList();
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                 ) 
            },
             getUserList(){
               let url=API.evaluate+API.evaluateUserList;
               let form=new FormData();
               form.append('mobile',this.person.mobile)
               this.$http.post(url,form,
                        {
                            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                        }
                        ).then(
                        (res) => {
                           
                            if (res.body.code==1) {
                                let that=this;
                                 res.body.data.forEach(function(item){
                                     if(that.assementList.indexOf(item.orderId)==-1){
                                          that.assementList.push(item.orderId);
                                     }
                                  })
                            } else {
                                Layer.showMsg("获取列表失败！");
                            }
                        },
                        (error) => {
                            Layer.showMsg("服务器开小差了...")
                            return
                        }
                    )
            },
            goBack() {
                this.$router.goBack()
            }
            ,
            checkMenu(type) {
                this.order.type = type;
                this.switchType();
            },
            goPay(order) {
                if (order.status == '0') {
                    this.payOrderResult.payAmount = order.payAmount;
                    this.payOrderResult.payOrderCode = order.payOrderCode;
                    this.$router.push({path: '/channel', query: {'payOrder': this.payOrderResult}})
                } else {
                    Layer.showMsg("订单已支付!");
                }
            },
            getOrder(deliveryOrderCode){
                if( this.assementList.indexOf(deliveryOrderCode)>=0){
                    return false;
                }else{
                    return true;
                }
               
                
            },
            goAssement(deliveryOrderCode){
                this.$router.push({path:'/assement',query:{deliveryOrderCode:deliveryOrderCode}})
            },
            switchType() {
                let url = API.serviceDomain + API.orderList + "?status=" + this.order.type;
                this.$http.get(url).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            this.orderArray = res.body.data;
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            deleteOrder(deliveryOrderCode) {
                MessageBox.confirm('确定删除订单?').then(action => {
                    let url = API.serviceDomain + API.orderDelete;
                    this.$http.post(url, {deliveryOrderCode: deliveryOrderCode}).then(
                        (res) => {
                            if (res.body.status == '000000') {
                                Layer.showMsg("删除成功.");
                                this.switchType();
                            } else {
                                Layer.showMsg(res.body.message);
                            }
                        },
                        (error) => {
                            Layer.showMsg("服务器开小差了...")
                            return
                        }
                    )
                });
            }
        }
    }
</script>
